﻿@using NB.MGJ.Model
@{
    Layout = null;
    var eid=ViewBag.eid;
    var Product = ViewBag.Product as Product_Product;
}
<link href="~/Content/Manger/tabletree4j.css" rel="stylesheet" />
<script src="~/Scripts/tableTree/TableTree4J.js"></script>
@*<script src="~/Scripts/WebUploader/webuploader.js"></script>*@
<script src="~/Scripts/WebUploader/webuploader.min.js"></script>
<script src="~/Scripts/MGJJS/Product/AddList.js"></script>
<link href="~/Scripts/Bootstrap/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap/js/bootstrap-datepicker.js"></script>
<style>
    .tittle-bg {
        background-color: #E8F2F7;
    }

    .GridView tr td {
        word-break: keep-all; /* 不换行 */
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
    }
    /*.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
        text-align: left;
    }*/
</style>


<style>
    #thelist {
    }

    .btns {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .btns #picker {
            /*background-color: blue;*/
        }

    .picker {
        position: relative;
    }

    .picker .webuploader-pick {
        display: none;
        width: 55px;
        height: 55px;
    }

    .picker input[type='file'] {
        opacity: 0;
        display: block;
        width: 55px;
        height: 55px;
        position: absolute;
        z-index: 99;
    }

    .nowrap {
        white-space: nowrap;
    }

    .datepicker.datepicker-dropdown.dropdown-menu {
        z-index: 3000 !important;
    }

    #TimeToMarket, #ProductionDate, #ExpirationDate {
        background: #FFFFFF;
    }

    #TimeToMarket:focus, #ProductionDate:focus, #ExpirationDate:focus {
        border: 1px solid #e4eaec;
    }
</style>




<div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        @*<li role="presentation" class="active">
            <a id="productMenu" href="#basicInfo" aria-controls="home" role="tab" data-toggle="tab" onclick="$.MGJ.ProductList.CutButtonMenu()">产品目录</a>
        </li>*@
        <li role="presentation" class="active">
            <a id="ForPower" href="#power" aria-controls="profile" role="tab" data-toggle="tab" onclick="$.MGJ.ProductList.CutButtonInfo()">产品信息</a>
        </li>
    </ul>
    <form id="product_form">
        <input type="hidden" id="Id" name="Id" value="@Product.Id" />

        <!-- Tab panes -->
        <div class="tab-content margin-top-20">
            @*<div role="tabpanel" class="tab-pane active" id="basicInfo">
                <div class="row" style="margin-top:15px;">

                    <div id="gridTreeDiv" style="width:100%;margin:0 auto"></div>

                </div>
            </div>*@

            <div @*role="tabpanel" class="tab-pane"*@ id="power">

                <div class="row">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right"><span class="red-600">*</span>&nbsp;产品名称:</div>

                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                        <input class="form-control EmptyValidationText" name="ProductName" type="text" value="@Product.ProductName" placeholder="请输入产品名称" maxlength="25" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
                        所属机构:
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                       
                        @NB.MGJ.Web.HtmlHelpers.Eselect(eid, "form-control EmptyValidationText", "EnterpriseId", Product.EnterpriseId)

                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
                        <span class="red-600">*</span>
                        产品编号:
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                        <input class="form-control EmptyValidationText" name="ProductCode" id="ProductCode" value="@Product.ProductCode" placeholder="请输入产品编号" maxlength="32"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
                        <span class="red-600">*</span>&nbsp;
                        产品类录:
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">

                        @Html.DropDownList("ClassifyId", null, new{@class = "form-control dis"})

                    </div>

                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
                        产品分类:
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                        @Html.DropDownList("TypeId", null, new { @class = "form-control dis" })

                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
                        副标题:
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                        <input class="form-control" type="text" name="Subheading" id="Subheading" value="@Product.Subheading" placeholder="请输入副标题" maxlength="25" />
                    </div>


                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
                        <span class="red-600">*</span><span>&nbsp;保质期:</span>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10" style="padding: 0; ">
                            <!--<input class="form-control" type="text" value="@Product.ExpirationDate" readonly="readonly" id="ExpirationDate" name="ExpirationDate" style="border-bottom-right-radius: 0px !important; border-top-right-radius: 0px !important; ">   -->
                            <input class="form-control" type="text" value="@Product.ExpirationDate" name="ExpirationDate" id="ExpirationDate" placeholder="请输入保质期" />
                        </div>
                        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="background: #EEE; text-align: center; padding: 0; border-bottom-right-radius: 4px; border-top-right-radius: 4px; display: flex; align-items: center; justify-content: space-around; line-height: 2.3em;">
                            <!--<span class="glyphicon glyphicon-th"></span>  -->
                            <span id="ExpirationDateType">天</span>
                            <input type="hidden" name="ExpirationDateType" value="天" />
                            <span style="display:inline-block">
                                @*<span class="glyphicon glyphicon-chevron-up block" id=" ExpirationDateUp" onclick="$.MGJ.ProductList.ExpirationDateType(+1)"></span>
                                <span class="glyphicon glyphicon-chevron-down block" id="ExpirationDateDown" onclick="$.MGJ.ProductList.ExpirationDateType(-1)"></span>*@

                                @*<span class="glyphicon glyphicon-chevron-up block" id=" ExpirationDateUp" ></span>
                                <span class="glyphicon glyphicon-chevron-down block" id="ExpirationDateDown" ></span>*@
                            </span>
                        </div>
                    </div>





                </div>



                @*<div class="row">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
                        <span class="red-600">*</span>&nbsp;
                        生产时间:
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                        <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11" style="padding: 0; ">
                            <input class="form-control" type="text" value="@Product.ProductionDate" readonly="readonly" id="ProductionDate" name="ProductionDate" style="border-bottom-right-radius: 0px !important; border-top-right-radius: 0px !important; ">
                        </div>
                        <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" style="background: #EEE; text-align: center; line-height: 2.3em; padding: 0; border-bottom-right-radius: 4px; border-top-right-radius: 4px; ">
                            <span class="glyphicon glyphicon-th "></span>
                        </div>
                    </div>


                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
                        <span class="red-600">*</span>&nbsp;上市时间:
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                        <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11" style="padding: 0; ">
                            <input class="form-control" type="text" value="@Product.TimeToMarket" readonly="readonly" id="TimeToMarket" name="TimeToMarket" style="border-bottom-right-radius: 0px !important; border-top-right-radius: 0px !important; ">
                        </div>
                        <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" style="background: #EEE; text-align: center; line-height: 2.3em; padding: 0; border-bottom-right-radius: 4px; border-top-right-radius: 4px; ">
                            <span class="glyphicon glyphicon-th"></span>
                        </div>
                    </div>


                </div>*@




                <div class="row">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
                        产品图片:
                    </div>
                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                            <div class="list-con" style="display:flex;align-items:center">
                                <label id="picker" class="picker" style="background-image: url('/Content/webImgs/upLogo/cp_img_tj.png' ); background-size: 100% 100%; width: 60px; height: 60px; border-radius: 5px; background-repeat: no-repeat;border-radius:4px;display:block "></label>
                                <input type="hidden" name="ImageUrl1" value="@Product.ImageUrl1" />
                            </div>
                            <div class="text-center" style="width:60px"><span class="red-600">*</span>整体图</div>
                        </div>

                        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                            <div class="list-con1" style="display:flex;align-items:center">
                                <label id="picker1" class="picker" style="background-image: url('/Content/webImgs/upLogo/cp_img_tj.png' ); background-size: 100% 100%; width: 60px; height: 60px; border-radius: 5px; background-repeat: no-repeat;border-radius:4px;display:block "></label>
                                <input type="hidden" name="ImageUrl2" value="@Product.ImageUrl2" />
                            </div>
                            <div class="text-center" style="width:60px">正面图</div>
                        </div>

                        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                            <div class="list-con2" style="display:flex;align-items:center">
                                <label id="picker2" class="picker" style="background-image: url('/Content/webImgs/upLogo/cp_img_tj.png' ); background-size: 100% 100%; width: 60px; height: 60px; border-radius: 5px; background-repeat: no-repeat;border-radius:4px;display:block "></label>
                                <input type="hidden" name="ImageUrl3" value="@Product.ImageUrl3" />
                            </div>
                            <div class="text-center" style="width:60px">背面图</div>
                        </div>
                        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                            <div class="list-con3" style="display:flex;align-items:center">
                                <label id="picker3" class="picker" style="background-image: url('/Content/webImgs/upLogo/cp_img_tj.png' ); background-size: 100% 100%; width: 60px; height: 60px; border-radius: 5px; background-repeat: no-repeat;border-radius:4px;display:block "></label>
                                <input type="hidden" name="ImageUrl4" value="@Product.ImageUrl4" />
                            </div>
                            <div class="text-center" style="width:60px">细节图</div>
                        </div>
                        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                            <div class="list-con4" style="display:flex;align-items:center">
                                <label id="picker4" class="picker" style="background-image: url('/Content/webImgs/upLogo/cp_img_tj.png' ); background-size: 100% 100%; width: 60px; height: 60px; border-radius: 5px; background-repeat: no-repeat;border-radius:4px;display:block "></label>
                                <input type="hidden" name="ImageUrl5" value="@Product.ImageUrl5" />
                            </div>
                            <div class="text-center" style="width:60px">局部图</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">淘宝链接:</div>
                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                        <input class="form-control EmptyValidationText" name="TaoBaoUrl" id="TaoBaoUrl" type="text" value="@Product.TaoBaoUrl" placeholder="请输入淘宝链接" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right"> 微信链接:</div>

                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                        <input class="form-control EmptyValidationText" type="text" name="WXUrl" id="WXUrl" value="@Product.WXUrl" placeholder="请输入微信链接" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">产品认证:</div>

                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                        <label class="col-xs-2 col-sm-2 col-md-2 col-lg-2 nowrap">
                            <input class="" type="checkbox" value="无公害" name="ApproveChe" />无公害
                        </label>
                        <label class="col-xs-2 col-sm-2 col-md-2 col-lg-2 nowrap">
                            <input type="checkbox" name="ApproveChe" value="绿色" />绿色
                        </label>
                        <label class="col-xs-2 col-sm-2 col-md-2 col-lg-2 nowrap">
                            <input type="checkbox" name="ApproveChe" value="绿色" />有机
                        </label>
                        <label class="col-xs-2 col-sm-2 col-md-2 col-lg-2 nowrap">
                            <input type="checkbox" name="ApproveChe" value="地理标记" />地理标记
                        </label>
                        <label class="col-xs-2 col-sm-2 col-md-2 col-lg-2 nowrap">
                            <input type="checkbox" name="ApproveChe" value="生产原产地" />生产原产地
                        </label>
                        <label class="col-xs-2 col-sm-2 col-md-2 col-lg-2 nowrap">
                            <input type="checkbox" name="ApproveChe" value="三同" />三同
                        </label>
                        <label class="col-xs-2 col-sm-2 col-md-2 col-lg-2 nowrap">
                            <input type="checkbox" name="ApproveChe" value="其他" />其他
                        </label>
                        <label class="col-xs-2 col-sm-2 col-md-2 col-lg-2 nowrap">
                            <input type="checkbox" name="ApproveChe" value="无认证" />无认证
                        </label>
                        @*<label class="col-xs-2 col-sm-2 col-md-2 col-lg-2 nowrap">
                            <input type="checkbox" name="ApproveChe" value="Global&nbsp;G.A.R" />Global&nbsp;G.A.R
                        </label>*@
                    </div>
                    <input type="hidden" id="Approve" name="Approve" value="@Product.Approve" />
                </div>
                <div class="row">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right"> 质量体系:</div>

                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                        <input class="form-control" type="text" name="Constitution" id="Constitution" value="@Product.Constitution" placeholder="请输入输入质量体系" />
                    </div>
                </div>

                <input type="hidden" id="CustomInfo" name="CustomInfo" value="@Product.CustomInfo"/>
                <div id="CustomInfoWrap"></div>
                
                <div class="row">
                    <div class="col-xs-offset-2 col-xs-10">
                        <button class="btn btn-default" onclick="$.MGJ.ProductList.AddCustomInfo()" type="button">添加自定义信息</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>

    $(document).ready(function () {

       var customInfoJson=  $("#CustomInfo").val()
       if (customInfoJson == "") {
           return;
       }
       $.MGJ.ProductList.AppendCustomInfo(customInfoJson);


    })
    
    //var ProductionDate = undefined; TimeToMarket = undefined;

    //// 生产时间
    //$("#ProductionDate").datepicker({
    //    format: "yyyy-mm-dd",
    //    language: 'cn',
    //    //todayBtn: "linked",
    //    autoclose: true,
    //    todayHighlight: true,
    //    endDate: new Date()
    //}).on('hide', function (e) {
    //    $('#product_form').data('bootstrapValidator')
    //        .updateStatus('ProductionDate', 'NOT_VALIDATED', null)
    //        .validateField('ProductionDate');
    //})

    //// 上市时间
    //$("#TimeToMarket").datepicker({
    //    format: "yyyy-mm-dd",
    //    language: 'cn',
    //    //todayBtn: "linked",
    //    autoclose: true,
    //    todayHighlight: true,
    //    startDate: new Date()
    //}).on('hide', function () {
    //    $('#product_form').data('bootstrapValidator')
    //        .updateStatus('TimeToMarket', 'NOT_VALIDATED', null)
    //        .validateField('TimeToMarket');
    //})



    var GRIDTREESTYLEID
    $(document).on("click", ".GRIDTREESTYLE", function () {
        $(".GRIDTREESTYLE").css("background", "#FFFFFF")
        $(this).css("background", "rgb(207, 223, 243)")
        GRIDTREESTYLEID = $(this).parent().attr("id")
    })

    $("#ForPower").on("click", function () {
        if (GRIDTREESTYLEID == undefined) {
            $.L.msgError("未选产品类型")
            return false;
        }
    });
    
    $(function () {
        
      
        var approves = "@Product.Approve";
        
        $(approves.split(',')).each(function (i, e)
        {
            $("input:checkbox[value='"+e+"']").attr('checked', 'true');
        })
    });


    $(function () {
        $('#product_form').bootstrapValidator({
            group: '.col-xs-4.col-md-4',
            fields: {
                ProductName: {
                    validators: {
                        notEmpty: {
                            message: '产品名称不能为空'
                        },
                        //regexp: {
                        //    regexp: /^[a-zA-Z0-9\u4e00-\u9fa5]+$/,
                        //    message: '产品名称不能输入符号'
                        //},
                        stringLength: {
                            max: 25,
                            message: '产品名称最大长度为25'
                        }
                    }
                },
                ProductCode: {
                    validators: {
                        notEmpty: {
                            message: '产品编号不能为空'
                        },
                        regexp: {
                            regexp: /^[^\u4e00-\u9fa5]{0,}$/,
                            message: '产品编号不能输入汉字'
                        }
                    }
                },
                //ProductionDate: {
                //    validators: {
                //        notEmpty: {
                //            message: '生产日期不能为空'
                //        },

                //    }
                //},
                //TimeToMarket: {
                //    validators: {
                //        notEmpty: {
                //            message: '上市日期不能为空'
                //        },

                //    }
                //},
                ExpirationDate: {
                    validators: {
                        notEmpty: {
                            message: '保质期不能为空'
                        },
                        regexp: {
                            regexp: /^[1-9][0-9]*$/,
                            message: '保质期只能为正整数'
                        }
                    }
                },
                ClassifyId: {
                    validators: {
                        notEmpty: {
                            message: '产品类录不能为空'
                        },

                    }
                },
                //Subheading: {
                //    validators: {
                //        regexp: {
                //            regexp: /^[a-zA-Z0-9\u4e00-\u9fa5]+$/,
                //            message: '副标题不能输入符号'
                //        },
                //        stringLength: {
                //            max: 25,
                //            message: '副标题最大长度为25'
                //        }
                //    }
                //}
            }
        });
    })

    switch ($("input[name='ExpirationDateType']").val()) {
        case "天":
            var ExpirationDateType = 0;
            break;
        case "月":
            var ExpirationDateType = 1;
            break;
        default:
            var ExpirationDateType = 2;
    }
</script>
